<template>
	<view class="container">
		<u-navbar title="充值" :title-bold="true" title-color="#000" :border-bottom="false" custom-class="home-bg" :background="{ background: 'transparent' }"></u-navbar>

		<!-- 顶部账户余额区域 -->
		<view class="account-section">
			<view class="account-card">
				<view class="account-header">
					<view class="account-info">
						<view class="title">账户余额</view>
						<view class="amount">{{ user.remainRewardPoints }}</view>
						<u-icon name="coin" size="50" color="#FFFFFF"></u-icon>
					</view>

					<!-- 	<view class="account-menu">
						<view class="menu-item">充值记录</view>
						<view class="menu-item">消费积分: 10</view>
						<view class="menu-item">可提现积分: {{ user.remainRewardPoints }}</view>
					</view> -->
					<view class="deposit" @click="depositUrl()">
						去提现
						<u-icon name="arrow-right" size="22" color="#F05A39" style="margin-left: 5rpx"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 充值金额选择区域 -->
		<view class="recharge-section">
			<view class="section-title">充值金额:</view>

			<!-- 充值选项网格 -->
			<view class="grid-wrapper">
				<view class="grid-row">
					<view class="grid-col" v-for="(item, index) in amountOptions">
						<view :class="['option', currentAmount === item.rechargeMoney ? 'active' : '']" @tap="selectAmount(item)">
							<view class="option-left">
								<image src="/static/user/Frame20.png" mode="aspectFill" style="width: 28rpx; height: 28rpx; margin-right: 7rpx"></image>
								<text>¥{{ item.rechargeMoney }}-{{ item.rechargeMoneyEnd }}</text>
							</view>
							<!-- <text class="option-price">¥{{ item.rechargeMoney }}</text> -->
						</view>
					</view>
				</view>
			</view>

			<!-- 自定义金额输入 -->
			<view class="custom-input-wrapper">
				<text class="left">￥</text>
				<view style="margin-left: 15rpx; width: 100%">
					<input type="number" @focus="handleFocus" @input="validateAmount" maxlength="4" placeholder="请输入自定义金额" v-model="customAmount" style="width: 100%" />
				</view>
			</view>

			<!-- 说明文本 -->
			<!-- <view class="description">说明: 本次充值仅限于在平台上消费, 无法跨地区跨站点使用, 一经购买概不退换</view> -->
		</view>

		<!-- 确认充值按钮 -->
		<view class="action-section">
			<u-button class="confirm-btn" type="primary" shape="circle" @tap="handleConfirm">确认充值</u-button>
		</view>

		<u-popup v-model="upShow" mode="center" border-radius="25">
			<view class="up-center">
				<view class="name">请选择支付方式</view>
				<view class="up">
					<u-radio-group class="up-group" v-model="value" v-for="(item, index) in list" :key="index">
						<view class="up-radio">
							<view>
								<u-icon :name="item.icon" :color="item.color" size="38"></u-icon>
								<text>{{ item.name }}</text>
							</view>
							<u-radio :name="item.index"></u-radio>
						</view>
					</u-radio-group>
				</view>
				<view @click="radioChange" class="radioBtn">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import user from '@/api/user';
import { getCustomAmount } from '@/utils/utils.js';
export default {
	data() {
		return {
			currentAmount: 0,
			customAmount: '',
			amountOptions: [],
			user: {},
			upShow: false,
			list: [
				{
					name: '微信',
					disabled: false,
					icon: 'weixin-fill',
					color: '#04dd24',
					index: 1
				},
				{
					name: '支付宝',
					disabled: false,
					icon: 'zhifubao-circle-fill',
					color: '#2979ff',
					index: 2
				}
			],
			value: 1,
			//输入金额是否无误
			customAmountBool: true
		};
	},
	onLoad() {
		this.getAxRechargeRule();
		this.getInfo();
	},
	methods: {
		radioChange() {
			this.upShow = false;
			this.electUp(this.value);
		},
		// 聚焦回调
		handleFocus() {
			this.currentAmount = 0; // 清空错误提示
		},
		validateAmount() {
			this.customAmountBool = false;
			const customAmount = getCustomAmount(this.customAmount);
			if (!customAmount) {
				return;
			}
			this.customAmount = customAmount;
			this.customAmountBool = true;
		},

		getAxRechargeRule() {
			user.getAxRechargeRule().then((res) => {
				this.amountOptions = res.rows;
			});
		},
		selectAmount(item) {
			const num = Math.abs(Number(item.rechargeMoneyEnd) - Number(item.rechargeMoney));
			// this.currentAmount = value;
			const price = (Math.random() * num + Number(item.rechargeMoney)).toFixed(2);
			this.customAmount = price; // 清空自定义输入
			console.log(this.currentAmount, !this.customAmount);
		},
		getInfo() {
			user.getInfo()
				.then((res) => {
					this.user = res.data;
				})
				.catch((erro) => {
					console.log(erro);
				});
		},
		handleConfirm() {
			if (!this.currentAmount && !this.customAmount) {
				uni.showToast({
					title: '请选择充值金额',
					icon: 'none'
				});
				return;
			}
			if (!this.customAmountBool) {
				uni.showToast({
					title: '金额格式错误（示例：12.34）',
					icon: 'error'
				});
				return;
			}
			this.upShow = true;
		},
		//选择充值
		electUp(upIndex) {
			let point = 0;
			if (this.customAmount) {
				point = this.customAmount;
			} else {
				point = this.currentAmount;
			}

			if (upIndex == 1) {
				uni.showLoading({
					title: '处理中...'
				});
				user.setUserRecharge({
					rechargeMoney: point //金额
				}).then((res) => {
					uni.hideLoading();
					const myUrl = res.msg;
					// location.href = myUrl;
					//this.handleOpenUrl(myUrl);

					//#ifdef APP-PLUS
					plus.runtime.openURL(myUrl);
					// #endif

					//#ifndef APP-PLUS
					window.location.href = myUrl;
					// #endif
				});
			} else if (upIndex == 2) {
				uni.showLoading({
					title: '处理中...'
				});
				user.setRechargezfb({
					rechargeMoney: point //金额
				}).then((res) => {
					uni.hideLoading();
					const paymentUrl = res.msg; // 获取支付链接
					//#ifndef APP-PLUS
					window.location.href =
						`https://ds.alipay.com/?scheme=` + encodeURIComponent(`alipays://platformapi/startapp?appId=2021005121684192&page=` + encodeURIComponent(paymentUrl));
					// #endif

					//#ifdef APP-PLUS
					plus.runtime.openURL('alipays://platformapi/startapp?appId=2021005121684192&page=' + encodeURIComponent(paymentUrl));
					// #endif
				});
			}
		},
		// 封装跨平台跳转方法 ==============================1
		handleOpenUrl(url) {
			// URL 安全性校验
			// if (!/^https?:\/\//i.test(url)) {
			// 	uni.showToast({ title: '无效的支付链接', icon: 'none' });
			// 	return;
			// }

			// 分平台处理
			// #ifdef APP-PLUS
			plus.runtime.openURL(url, (error) => {
				if (error) {
					uni.showToast({
						title: '无法打开支付页面，请手动操作',
						icon: 'none'
					});
				}
			});
			// #endif

			// #ifdef H5
			window.open(url, '_blank');
			// #endif

			// #ifdef MP-WEIXIN
			uni.showModal({
				title: '提示',
				content: '即将跳转到支付页面',
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: `/pages/common/webview?url=${encodeURIComponent(url)}`
						});
					}
				}
			});
			// #endif
		},
		depositUrl() {
			uni.navigateTo({
				url: '/bundle/pages/widthdraw_result/widthdraw_result'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: url('@/static/user/Rectangle 200.png') no-repeat;
	background-size: 100% auto;
}
.radioBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200rpx;
	height: 60rpx;
	background-color: #0055ff;
	color: #fff;
	margin-top: 35rpx;
	border-radius: 50rpx;
}
.up-center {
	width: 450rpx;
	height: 350rpx;
	background-color: #fff;
	padding: 30rpx;

	display: flex;
	align-items: center;
	flex-direction: column;
	.name {
		margin-top: 20rpx;
		font-weight: bold;
	}
	.up {
		margin-top: 20rpx;
		.up-group {
			display: flex;
			align-items: center;
			flex-direction: column;
			.up-radio {
				width: 350rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				text {
					margin-left: 10rpx;
				}
			}
		}
	}
}

.deposit {
	position: absolute;
	right: 0;
	bottom: 20rpx;
	background-color: #fff;
	font-size: 24rpx;
	color: #f05a39;
	display: flex;
	align-items: center;
	justify-content: end;

	width: 110rpx;
	height: 50rpx;
	border-radius: 84rpx 0rpx 0rpx 84rpx;
}

.container {
	min-height: 100vh;
	padding-bottom: 40rpx;
}

/* 账户信息样式 */
.account-section {
	padding: 0 20rpx;
	margin-top: 50rpx;
	.account-card {
		position: relative;
		background: url('@/static/user/Frame21.png') no-repeat;
		background-size: 100% auto;
		border-radius: 16rpx;
		overflow: hidden;

		.account-header {
			padding: 30rpx 50rpx;

			.account-info {
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.title {
					font-size: 36rpx;
					font-weight: bold;
					color: #513d01;
				}

				.amount {
					font-weight: bold;
					font-size: 48rpx;
					color: #513d01;
					margin: 10rpx 0;
				}
			}

			.account-menu {
				display: flex;
				justify-content: space-between;
				width: 65%;
				margin-top: 20rpx;
				font-size: 20rpx;
				color: #513d01;

				.menu-arrow {
					display: flex;
					align-items: center;
				}
			}
		}
	}
}

/* 充值金额区域样式 */
.recharge-section {
	margin-top: 30rpx;
	background-color: #fff;
	border-radius: 30rpx;
	padding: 30rpx;

	.section-title {
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 30rpx;
	}

	.grid-wrapper {
		width: 100%;

		.grid-row {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-bottom: 20rpx;

			.grid-col {
				width: 28%;
				margin: 20rpx 0;
				.option {
					height: 120rpx;
					background-color: #f8f8f8;
					border-radius: 8rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;

					.option-left {
						display: flex;
						align-items: center;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}
					.option-price {
						margin-top: 10rpx;
						font-weight: 500;
						font-size: 20rpx;
						color: #777777;
					}

					&.active {
						border: 2rpx solid #ff6a54;
						background-color: #fff2f0;
					}
				}
			}
		}
	}

	.custom-input-wrapper {
		display: flex;
		align-items: center;
		height: 90rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		margin-top: 30rpx;
		background: #f8f8f8;
		.left {
			font-weight: 500;
			font-size: 32rpx;
			color: #f05a39;
			margin-left: 20rpx;
		}
		.u-input {
			flex: 1;
			height: 100%;

			input {
				height: 100%;
				text-align: center;
			}
		}
	}

	.description {
		font-size: 24rpx;
		color: #999;
		margin-top: 30rpx;
		line-height: 1.5;
	}
}

/* 按钮区域样式 */
.action-section {
	padding: 40rpx 20rpx;

	.confirm-btn {
		background-color: #ff6a54;
		color: #fff;
		border-radius: 44rpx;
		font-size: 34rpx;
		height: 90rpx;
		line-height: 90rpx;
	}
}
</style>
